<template>
  <div style="height:100%">
    <div>
      <img src="@/assets/logo.png" alt="logo" style="width:230px;height:49px;margin-top:15px;margin-left:20px;"
        @click="to('/')">
    </div>
    <!-- 主盒子 -->
    <div class="mainbox">
      <!-- 左盒子 -->
      <div class="left-contrainer">
        <img src="@/assets/login_background.png" class="login_background" style="width:330px;height:500px;">

      </div>
      <!-- 分割线 -->
      <div class="divider"></div>
      <!-- 右盒子 -->
      <div class="right-contrainer">
        <div class="title">
          找回密码
        </div>
        <div class="input-box">
          <el-input v-model="email" placeholder="请输入邮箱地址" size="large" />
        </div>
        <div class="input-box">
          <el-input v-model="captcha" placeholder="请输入验证码" size="large" max="6" type="number">
            <template #suffix>
              <span class="verify" @click="getCaptcha" v-if="!isShowCount">获取验证码</span>
              <span class="verift-disable" v-else>{{ captchaCountdown }}秒可再次发送</span>
            </template>
          </el-input>
        </div>

        <div class="input-box">
          <el-input v-model="password" placeholder="请输入新密码" size='large' show-password type='password' />

        </div>
        <div class="login-btn" @click="submit">确认重置</div>

      </div>

    </div>
    <div class="introduce">
      更快，更全面的深度学习可视化平台
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {sendCaptcha,forgetPassword} from '@/api.js'
const router = useRouter();
const to = (url) => {
  router.push(url);
};
const password = ref('')
const captcha = ref('')
const email = ref('')
const captchaCountdown = ref(60);
const isShowCount = ref(false);
const getCaptcha = async () => {
  if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
    ElMessage({
      message: "请正确输入邮箱",
      type: "error",
    });
    return;
  }
  if (!email.value) {
    ElMessage({
      message: "请输入注册邮箱",
      type: "error",
    });
    return;
  }
  const res= await sendCaptcha(email.value);
  console.log(res);
  isShowCount.value = true;
  const captchaTimer = setInterval(() => {
    if (captchaCountdown.value > 0) {
      captchaCountdown.value--;
    }
    if (captchaCountdown.value == 0) {
      clearInterval(captchaTimer);
      captchaCountdown.value = 60;
      isShowCount.value = false;
    }
  }, 1000);
};
const submit = async () => {
  if (!password.value) {
    ElMessage({
      message: "请输入密码",
      type: "error",
    });
  }
  if (!captcha.value) {
    ElMessage({
      message: "请输入验证码",
      type: "error",
    });
  }
  const res= await forgetPassword(email.value,captcha.value,password.value);
  console.log(res);
  if (res.success) {
    ElMessage({
      message: "密码重置成功",
      type: "success",
    });
  }
  else{
    ElMessage({
      message: "密码重置失败",
      type: "error",
    });
  }
}
</script>


<style scoped>
.mainbox {
  display: flex;
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  justify-content: center;
  justify-content: space-around;
  align-items: center;

}

.left-contrainer {

  width: 370px;
  height: 440px;
}

.login_background {
  width: 342px;
  height: 380px
}

.verify {
  color: #4177f7;
  font-size: 12px;
  cursor: pointer;
}

.verift-disable {
  color: #999999;
  font-size: 12px;
  user-select: none;
}

.introduce {
  margin-top: 60px;
  color: #000000;
  font-weight: 400;
  font-size: 22px;
  font-style: normal;
  text-decoration: none;
  text-align: center;
}

.divider {
  display: inline-block;
  width: 0px;
  height: 30em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  border-left: 1px var(--el-border-color) var(--el-border-style);
}

.right-contrainer {
  width: 370px;
  position: relative;
  top: 45px;
}

.title {
  font-weight: 600;
  font-size: 25px;
}

.input-box {
  margin-top: 20px;
  width: 300px;
}

.login-btn {
  width: 130px;
  background-color: #2979FF;
  border-radius: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 60px;
}
</style>